<template> 
  <div id="remark-footer">
    <div class="remark-main">
      <div v-show="submitShow===true" class="note-icon flex-box">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-diary-pinglun2"></use>
        </svg>
      </div>
      <input type="text" name="remark" v-model="message" ref="remarkbox" id="remark" @focus="remarkActive" @blur="remarkOver">
      <div class="remark-icons flex-box" v-show="submitShow===false">
        <span><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-diary-pinglun1"></use>
          </svg>
        </span>
        <span><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-diary-dianzan"></use>
          </svg>
        </span>
        <span><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-diary-shoucang"></use>
          </svg>
        </span>
      </div>
      <button class="submit" :class="{ 'submit-active' : submitActive }" @click="submitMsg" v-show="submitShow===true">发送</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "Footer",
  data() {
    return {
      submitShow: false,
      submitActive: false,
      message: "",
      remarkContent: {
        message_nickname: "",
        message_content: "",
        article_id: "",
        message_uuid: ""
      }
    };
  },
  computed: {},
  watch: {
    message: {
      handler: function() {
        if (this.message.trim() === "") {
          this.submitActive = false;
        } else {
          this.submitActive = true;
        }
      }
    }
  },
  methods: {
    remarkActive() {
      // console.log(this.$store.state.isLogin);
      // console.log(this.$route);
      if (this.$store.state.isLogin === 0) {
        this.$router.push("/logPage");
      } else {
        this.submitShow = true;
      }
    },
    remarkOver() {
      this.submitShow = false;
    },
    submitMsg() {
      if (this.message.trim() === "") {
        return this.$refs.remarkbox.focus();
      } else {
        let userNameSet = this.$store.state.userInfo.userName;
        this.remarkContent.message_nickname = userNameSet
          ? userNameSet
          : "未知姓名";
        this.remarkContent.message_content = this.message;
        this.remarkContent.article_id = this.$route.params.articleDetail;
        this.remarkContent.message_uuid = this.$store.state.userInfo.uuid;
        this.$axios
          .post(
            "/api/?s=App.Table.Create&model_name=daxiong_message&data=" +
              JSON.stringify(this.remarkContent) +
              "&app_key=" +
              this.$appKeyWords.app_key
          )
          .then(data => {
            if (data.data.ret === 200 && data.data.data.err_code === 0) {
              this.$emit("reviewMessage");
              this.$refs.remarkbox.blur();
              this.message = "";
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  },
  mounted() {
    // console.log(this.$route.params.articleDetail);
    console.log(this.$store.state.userInfo);
  }
};
</script>
<style lang="scss" scoped>
#remark-footer {
  width: 100%;
  height: r(90);
  background: #fff;
  position: fixed;
  bottom: 0;
  margin-top: r(-90);
  left: 0;
  z-index: 9999;
  border-top: 1px solid rgba($color: #000000, $alpha: 0.06);
  .remark-main {
    width: 100%;
    height: 100%;
    #remark {
      width: r(460);
      height: r(48);
      margin-top: r(20);
      margin-left: r(24);
      float: left;
      padding-left: r(24);
      padding-right: r(24);
      box-sizing: border-box;
      border-radius: 100px;
      border: 1px solid #eee;
      background: #fafafa;
    }
    .note-icon {
      width: r(60);
      height: 100%;
      float: left;
      font-size: r(48);
      margin-left: r(24);
      margin-right: r(-6);
    }
    .remark-icons {
      width: r(260);
      font-size: r(42);
      color: #999;
      height: 100%;
      float: left;
      span {
        margin-right: r(24);
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .submit {
      width: r(120);
      @include setPm(padding, 6, 32, 6, 32);
      background: #ccc;
      color: #fff;
      border: none;
      border-radius: 3px;
      margin-top: r(20);
    }
    .submit-active {
      background: #1ba1f6;
    }
  }
}
</style>
